<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>发光滑块</title>
	</head>
	<style>
		body {
		    display: flex; /* 使用flex布局 */
		    align-items: center; /* 垂直居中 */
		    justify-content: center; /* 水平居中 */
		    flex-direction: column; /* 垂直方向排列 */
		    gap: 3rem; /* 元素之间的间距 */
		    overflow: hidden; /* 隐藏溢出内容 */
		    margin: 0; /* 边距为0 */
		    min-height: 100vh; /* 最小高度为视口高度 */
		    box-sizing: border-box; /* 盒模型为border-box */
		    background-image: linear-gradient(45deg, #223, #112); /* 背景线性渐变 */
		    background:
		        radial-gradient(at 100% 0, #fff2, #fff0 50%), /* 背景径向渐变 */
		        radial-gradient(at 0% 100%, #0002, #0000 50%), /* 背景径向渐变 */
		        #545153; /* 背景颜色 */
		}
		
		/* 定义CSS变量 */
		@property --c {
		    syntax: '<color>';
		    inherits: true;
		    initial-value: #0000;
		}
		
		/* 滑动条样式 */
		.glow {
		    --c: rgb(0, 255, 255, calc(0.25 + var(--val) / 125)); /* 设置颜色透明度 */
		    --c: hsl(160deg 80% 50% / calc(0.25 + var(--val) / 125)); /* 设置颜色透明度 */
		    -webkit-appearance: none; /* 移除默认样式 */
		    -moz-appearance: none; /* 移除默认样式 */
		    appearance: none; /* 移除默认样式 */
		    background: transparent; /* 背景透明 */
		    cursor: pointer; /* 鼠标指针为手型 */
		    width: 15rem; /* 宽度 */
		    position: relative; /* 相对定位 */
		}
		
		/* 滑动条前景样式 */
		.glow::before {
		    content: ""; /* 伪元素内容为空 */
		    position: absolute; /* 绝对定位 */
		    top: 0; /* 顶部对齐 */
		    left: 0; /* 左侧对齐 */
		    width: calc((var(--val) - 1) * 1%); /* 宽度根据变量值计算 */
		    min-width: 0.5em; /* 最小宽度 */
		    height: 100%; /* 高度100% */
		    background: var(--c); /* 背景颜色 */
		    /* 阴影效果 */
		    box-shadow:
		        0 0 0.2em 0 hsl(0 0% 0%) inset,
		        -0.1em 0.1em 0.1em -0.1em hsl(0 0% 100% / 0.5),
		        0 0 calc(1em + 0.001em * var(--val)) calc(0.1em + 0.00025em * var(--val)) var(--c);
		    border-radius: 1em 0 0 1em; /* 边框圆角 */
		    aopacity: calc(20% + var(--val) * 1%); /* 透明度根据变量值计算 */
		}
		
		/* Track Styles */
		
		/* Chrome, Safari, Opera, and Edge Chromium */
		.glow::-webkit-slider-runnable-track {
		    /* 设置轨道样式 */
		    box-shadow:
		        0 0 0.2em 0 hsl(0 0% 0%) inset,
		        -0.1em 0.1em 0.1em -0.1em hsl(0 0% 100% / 0.5);
		    background:
		        linear-gradient(to bottom right, #0001, #0000),
		        #343133;
		    border-radius: 1em; /* 边框圆角 */
		    height: 1em; /* 高度 */
		}
		
		/* Firefox */
		.glow::-moz-range-track {
		    /* 设置轨道样式 */
		    box-shadow: 0 0 2px 0 hsl(0 0% 0%) inset, -1px 1px 1px -1px hsl(0 0% 100% / 0.5);
		    background:
		        linear-gradient(var(--c) 0 0) 0 0 / calc(var(--val) * 1%) 100% no-repeat,
		        linear-gradient(to bottom right, #0001, #0000),
		        #343133;
		    border-radius: 1em; /* 边框圆角 */
		    height: 1em; /* 高度 */
		}
		
		/* Thumb Styles */
		
		/* Chrome, Safari, Opera, and Edge Chromium */
		.glow::-webkit-slider-thumb {
		    /* 设置滑块样式 */
		    --d: var(--c);
		    --d: rgb(from var(--c) r g b / calc(0.35 * var(--val) * 1%));
		    -webkit-appearance: none; /* 移除默认样式 */
		    appearance: none; /* 移除默认样式 */
		    background-color: #5cd5eb; /* 背景颜色 */
		    transform: translateY(calc(-50% + 0.5em)); /* 垂直居中 */
		    width: 4em; /* 宽度 */
		    aspect-ratio: 1; /* 宽高比为1:1 */
		    background: red; /* 背景颜色 */
		    border-radius: 50%; /* 边框圆角 */
		    /* 复合背景 */
		    background:
		        radial-gradient(farthest-side, #0000 22.5%, var(--d) 0, #0000 calc(var(--val) * 0.75%)) 50% 50% / 100% 100% no-repeat,
		        radial-gradient(#0000 15%, #343133 16%, #545153 20%),
		        repeating-linear-gradient(#0000 0 10%, #0002 0 20%) 50% 50% / 25% 25% no-repeat,
		        repeating-linear-gradient(90deg, #0000 0 10%, #0002 0 20%) 50% 50% / 25% 25% no-repeat,
		        radial-gradient(var(--c) 17%, #0000 0),
		        #545153;
		    /* 阴影效果 */
		    box-shadow:
		        inset -0.15em -0.15em 0.2em #0008,
		        inset 0.15em 0.15em 0.2em #ffffff22,
		        inset calc(var(--val) * 1em / 500) 0em calc(var(--val) * 1em / 500) calc(var(--val) * -1em / 700) var(--c),
		        0.25em 0.25em 0.5em #0006,
		        calc(0.0125em * var(--val)) calc(0.005em * var(--val)) calc(0.02em * var(--val)) calc(-0.01em * var(--val)) #000a;
		    border-radius: 50%; /* 边框圆角 */
		}
		
		/* Firefox */
		.glow::-moz-range-thumb {
		    /* 设置滑块样式 */
		    border: none; /* 移除边框 */
		    -webkit-appearance: none; /* 移除默认样式 */
		    appearance: none; /* 移除默认样式 */
		    background-color: #5cd5eb; /* 背景颜色 */
		    width: 4em; /* 宽度 */
		    height: 4em; /* 高度 */
		    aspect-ratio: 1; /* 宽高比为1:1 */
		    background: red; /* 背景颜色 */
		    border-radius: 50%; /* 边框圆角 */
		    /* 复合背景 */
		    background:
		        radial-gradient(#0000 15%, #343133 16%, #545153 20%),
		        repeating-linear-gradient(#0000 0 10%, #0002 0 20%) 50% 50% / 25% 25% no-repeat,
		        repeating-linear-gradient(90deg, #0000 0 10%, #0002 0 20%) 50% 50% / 25% 25% no-repeat,
		        radial-gradient(var(--c) 17%, #0000 0),
		        #545153;
		    /* 阴影效果 */
		    box-shadow:
		        inset -0.15em -0.15em 0.2em #0008,
		        inset 0.15em 0.15em 0.2em #ffffff22,
		        inset calc(var(--val) * 1em / 500) 0em calc(var(--val) * 1em / 500) calc(var(--val) * -1em / 700) var(--c),
		        0.25em 0.25em 0.5em #0006,
		        calc(0.015em * var(--val)) calc(0.005em * var(--val)) calc(0.02em * var(--val)) calc(-0.01em * var(--val)) #0008;
		    border-radius: 50%; /* 边框圆角 */
		}
	</style>
	<body>
		<input type="range" class="glow" style="--val: 50" value="50" min="0" max="100"
		    oninput="this.style='--val:'+this.value" />
	</body>
</html>